<style>
    .tools-btn { padding: 5px 7px; border-radius: 12px; }
    .type-info, .attach-info { display: none; }

    .range-input { text-align: center; }
    .description { color: #999; font-size: 13px; }
    .send-item-list li, .send-pet-list li { margin: 8px 0; }
    .send-item-list li .form-control, .send-pet-list li .form-control { margin-right: 2px; }
    .chosen-container-single .chosen-single { height: 35px; line-height: 35px; padding: 0 0 0 13px; }
    .chosen-container-single .chosen-single div b { background-position: 0 8px; }
    .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -18px 8px; }
    .div_item_name{float: left;}
    .div_item_id{float: left;}
    form{margin-bottom: 300px;}
</style>
<link rel="stylesheet" type="text/css" href="/public/static/plugin/inputSearch/autocomplete.css" />

<form method="post" action="/oss/?r=send/doAdd">
    <{include file='../common_params.tpl'}>

    <div class="box box-black">
        <div class="box-body">
            <h5> <i class="fa fa-users"></i>&nbsp;&nbsp;收件人设置</h5>
            <table class="table table-bordered">
                <colgroup>
                    <col style="width: 20%;"></col>
                    <col style="width: 80%;"></col>
                </colgroup>
                
                <tr>
                    <th class="th-label">渠道</th>
                    <td>
                        <select class="form-control" name="os">
                            <{foreach from=$osList item=item key=key}>
                        		<option value="<{$key}>"><{$item}></option>
                        	<{/foreach}>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th class="th-label">服务器</th>
                    <td id="change_server">
                        <select class="form-control" name="server">
                            <{foreach from=$serverList item=item key=key}>
                        		<option value="<{$key}>-<{$item}>" <{if $info.server_id == $key }>selected<{/if}> ><{$item}></option>
                        	<{/foreach}>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th class="th-label">发送类型</th>
                    <td>
                        <select name="send_type" id="sel_send_type" class="form-control">
                        	<{foreach from=$sendType item=item key=key}>
                        		<option value="<{$key}>" <{if $info.send_type == $key }>selected<{/if}> ><{$item}></option>
                        	<{/foreach}>
                        </select>
                    </td>
                </tr>

                <tr class="type-info" for="1">
                    <th class="th-label">角色名称</th>
                    <td>
                        <textarea class="form-control" rows="5" name="rolename" placeholder="请输入角色名字"><{$info.rolename}></textarea>
                    </td>
                </tr>

                <tr class="type-info" for="2">
                    <th class="th-label">角色ID</th>
                    <td>
                        <textarea class="form-control" rows="5" name="roleid" placeholder="多个角色换行分隔"><{$info.roleid}></textarea>
                    </td>
                </tr>

                <tr class="type-info" for="3">
                    <th class="th-label">账号名称</th>
                    <td>
                        <textarea class="form-control" rows="5" name="accountname" placeholder="多个账号换行分隔"><{$info.accountname}></textarea>
                    </td>
                </tr>

            </table>
            <h5> <i class="fa fa-envelope-o"></i>&nbsp;&nbsp;邮件内容</h5>
            <table class="table table-bordered">
                <colgroup>
                    <col style="width: 20%;"></col>
                    <col style="width: 80%;"></col>
                </colgroup>

                <tr>
                    <th class="th-label">邮件标题</th>
                    <td><input type="text" class="form-control" name="title" value="<{$info.title}>" /></td>
                </tr>

                <tr>
                    <th class="th-label">邮件内容</th>
                    <td><textarea class="form-control" name="content" rows="5"><{$info.content}></textarea></td>
                </tr>


                <tr class="attach-info" for="1" style="display: table-row;">
                    <th class="th-label">发送道具</th>
                    <td>
                        <ul class="nav send-item-list">
                            <{foreach from=$info.item item=item key=key}>
                            <li class="fli">
                                <div class="div_item_name" id="div_item_name_<{$key}>"></div>
                                <div class="div_item_id" id="div_item_id_<{$key}>"></div>
                                <input type="text" name="item_number[]" class="form-control inline" placeholder="数量" size="12" value="<{$item.item_number}>" />
                                
                                <select name="is_bind[]" class="form-control inline">
                                	<option value="1" <{if $item.is_bind == 1 }>selected<{/if}>>绑定</option>
                                	<option value="0" <{if $item.is_bind == 0 }>selected<{/if}>>不绑定</option>
                                </select>
                                <div class="box-tools inline">
                                    <a href="javascript:;" class="tools-btn tools-btn-add badge bg-green"><i class="fa fa-plus"></i></a>
                                    <a href="javascript:;" class="tools-btn btn-del badge bg-red"><i class="fa fa-minus"></i></a>
                                </div>                               
                                <input type="text" name="item_description[]" class="form-control inline" placeholder="描述" size="30" />
                            </li>
                            <script>
$(document).ready(function(){
	$('#div_item_name_<{$key}>').autocomplete({
		placeholder: '道具名称',
		hints: proposals,
		value: '<{$item.item_name}>',
		width: 150,
		height: 34,
		showButton: false,
		name:'item_name[]',
		onSubmit: sub,
		onBlur:blur,
		search:search
	});
	
	$('#div_item_id_<{$key}>').autocomplete({
		placeholder: '道具名称',
		hints: proposals,
		value: '<{$item.item_id}>',
		width: 150,
		height: 34,
		showButton: false,
		name:'item_name[]',
		onSubmit: sub,
		onBlur:blur,
		search:search
	});
});
                            </script>
                            <{/foreach}>
                        </ul>

                        <span class="description">道具ID/数量为必填,有一项为空表示不发送道具.</span>
                    </td>
                </tr>

            </table>
            
            <{include file="tpl/goods_search.tpl"}>
            
        </div>

        <div class="box-footer">
        	<a href="javascript:history.go(-1);" class="btn btn-default">返回</a>
            <button type="submit" name="sub" class="btn btn-default pull-right"><i class="fa fa-paper-plane-o"></i> 发送</button>
            <div style="clear: both;"></div>
        </div>
    </div>
</form>

<script type="text/javascript">
    $(function(){
        var itemUrl = '<{$itemUrl nofilter}>';
        var cloneItem = $(".send-item-list li:first-child").clone();
        var clonePet = $(".send-pet-list li:first-child").clone();

        $(".sel-item-list").chosen();
        $(".sel-item-type").live('change', function(){
            var type = $(this).val(),
                itemSelect = $(this).next('.sel-item-list');

            itemSelect.val('').find('option.item').remove();
            itemSelect.trigger("chosen:updated");
            if(type){
                $.getJSON(itemUrl, { 'type':type }, function(rs){
                    for(var i in rs){
                        itemSelect.append('<option class="item" value="'+rs[i]['id']+'">'+rs[i]['id']+' - '+rs[i]['name']+'</option>');
                    }
                    itemSelect.trigger("chosen:updated");
                });
            }
        });

        $("#sel_send_type").change(function(){
            var sendType = $(this).val();

            $(".type-info").hide().filter('[for="'+sendType+'"]').show();
        }).change();


        $("input.time").datetimepicker({
            format: 'yyyy-mm-dd hh:ii:00',
        });


        $(".tools-btn-add").live('click',function(){
        	var length = $(".send-item-list .fli").length;
        	if(length > 4){
        		layer.alert('发送的道具不能大于5种');
        		return false;
        	}
            var li = $(this).closest('li');
            var oneClone = cloneItem.clone();
            
            
            oneClone.insertAfter(li);
            oneClone.find('.sel-item-list').chosen();
            
//          oneClone.find('.div_item_name').autocomplete({
//          	placeholder: '道具名称',
//		        hints: proposals,
//		        width: 150,
//		        height: 34,
//		        showButton: false,
//		        name:'item_name[]',
//		        onSubmit: sub,
//		        onBlur:blur,
//		        search:search
//	        });
//          
//          oneClone.find('.div_item_id').autocomplete({
//          	placeholder: '道具ID',
//          	hints: item_id,
//          	width: 150,
//          	height: 34,
//          	showButton: false,
//          	name:'item_id[]',
//          	onSubmit: sub1,
//          	onBlur:blur1,
//          	search:search1
//          });
            
        });

        $(".pet-btn-add").live('click',function(){
            var li = $(this).closest('li');
            var oneClone = clonePet.clone();
            oneClone.insertAfter(li);
        });

        $(".btn-del").live('click',function(){
            if(!window.confirm('是否要删除该条数据?')) return true;
            var li = $(this).closest('li'),
                ul = li.closest('ul');

            if(ul.children('li').length > 1){
                li.remove();
            }else{
                li.find('select, input').val('').change();
            }
        });

        function getRangeVal(object){
            if(!object) return null;

            var val = object.val();

            if(object.hasClass('time')){
                return Date.parse(new Date(val));
            }else{
                return val;
            }
        }
        
        var nameflag = true;
        var idflag = true;
        var numberflag = true;
        $('button[name="sub"]').click(function(){
        	var title = $('input[name="title"]').val();
        	if(title == ''){
        		layer.alert('请填写邮件标题', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var title = $('textarea[name="content"]').val();
        	if(title == ''){
        		layer.alert('请填写邮件内容', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	$('input[name="item_name[]"]').each(function (i){
        		if($(this).val() == ''){
        			nameflag = false;
        		}else{
        			nameflag = true;
        		}
            });
            
            if(!nameflag){
            	layer.alert('请填写道具名称', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
            }

            $('input[name="item_id[]"]').each(function (i){
        		if($(this).val() == ''){
        			idflag =  false;
        		}else{
        			idflag = true;
        		}
            });
            
            if(!idflag){
            	layer.alert('请填写道具ID', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
            }
            
            $('input[name="item_number[]"]').each(function (i){
            	var max_overlap = $(this).attr('data-max');
            	_sthis = $(this);
		        var num = $(this).val();
        		if($(this).val() == ''){
        			numberflag = false;
        		}else if(parseInt(num) > parseInt(max_overlap)){
        			_sthis.val(max_overlap);
        		}else{
        			numberflag = true;
        		}
            });
            
            if(!numberflag){
            	layer.alert('请填写道具数量', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
            }
 
            //return false;
        });
    });
</script>

<script src="/public/static/plugin/inputSearch/autocomplete.js"></script>
<script>
$(document).on('keyup','input[name="item_name[]"]',function(){
	
});

var proposals = {};

//根据道具名称搜索出道具id
var sub = function(val,input){
	getValue(val,input,1);
};

var blur =function(val,input){
	getValue(val,input,1);
};

var search = function(val){
	var data = selectGoods(val,1);
	return data;
};



function selectGoods(val,type){
	var g = $('input[name="g"]').val();
	var url = '?r=goods/autoComplete&g='+g;
	var json = '';
	$.ajax({
    	type : 'POST',
    	url : url,
    	async:false,
		data : {'val':val,'type':type},
		dataType :'JSON',
		success : function(res){
			if(res.status == 1){
				json = res.data;
			}else{
					
			}
		}
	});
	return json;
}

function getValue(val,input,type){
	var g = $('input[name="g"]').val();
	var url = '?r=goods/getValue&g='+g;
	$.ajax({
    	type : 'POST',
    	url : url,
		data : {'val':val,'type':type},
		dataType :'JSON',
		success : function(res){
			if(res.status == 1){
				if(type == 1){
					input.parent('div').parent('div').parent().find("input[name='item_id[]']").val(res.data.gid);
					input.parent('div').parent('div').parent().find("input[name='item_number[]']").attr('data-max',res.data.max_overlap);
					input.parent('div').parent('div').parent().find("input[name='item_description[]']").val(res.data.description);
				}else if(type == 2){
					input.parent('div').parent('div').parent().find("input[name='item_name[]']").val(res.data.name);
					input.parent('div').parent('div').parent().find("input[name='item_number[]']").attr('data-max',res.data.max_overlap);
					input.parent('div').parent('div').parent().find("input[name='item_description[]']").val(res.data.description);
				}
			}else{
					
			}
		}
	});
}

</script>


<script>
var item_id = {};
//根据道具id搜索出道具名称
var sub1 = function(val,input){
	getValue(val,input,2);
};

var blur1 =function(val,input){
	getValue(val,input,2);
};

var search1 = function(val){
	var data = selectGoods(val,2);
	return data;
};




</script>

<script>
	$(function(){
		var onChange = function(val){
	        //console.log(val);
	        var os = val;
        	var g = $("input[name='g']").val();
        	var url = '/oss/?r=channel/getServer&g='+g;
        	$.ajax({
    		    type : 'POST',
    		    url : url,
			    data : {'os':os,'g':g},
			    dataType :'JSON',
			    success : function(res){
				    if(res.status == 1){
				    	var option = '';
				    	for (var i=0;i<res.data.list.length;i++){
				    		option += "<option value='"+res.data.list[i]['server_id']+"-"+res.data.list[i]['server_name']+"'>"+res.data.list[i]['server_name']+"</option>";
					    }
					    $('select[name="server"]').empty();
					    $('select[name="server"]').append(option);
					    $('#change_server').text('');
					    
					    var select = '<select class="form-control" name="server">'+option+'</select>';
					    
					    $('#change_server').html(select);
					    $('#change_server').find('select[name="server"]').searchableSelect();
				    }else{
					    $('select[name="server"]').empty();
				    }
			    }
	        });
        };
		
		$('select[name="server"]').searchableSelect();
		$('select[name="os"]').searchableSelect({onChange:onChange});
		  
	});
	
	
	
</script>

<script>
	$("input[name='item_number[]']").live('blur',function(){
		var max_overlap = $(this).attr('data-max');
		var num = $(this).val();
		var _this = $(this);
		if( parseInt(num) > parseInt(max_overlap)){
			layer.alert('该道具的最大数量是'+max_overlap, {icon: 2, skin: 'layui-layer-molv'});
			_this.val(max_overlap);
		}
	});	
</script>


